 <template>
 <div class="apple">
    <div class="heade">
        <h1 style="line-height: 50px; font-weight: bold; color: aliceblue;">Apple品牌商品管理</h1>
    </div>
    <div style="margin-top: 20PX; text-align: center; float: left; padding: 0 110px; width: 100%;">
        <el-select v-model="searchName" placeholder="请选择" class="demo-form-inline" clearable>
            <el-option-group
            v-for="group in options"
            :key="group.label"
            :label="group.label">
                <el-option
                    v-for="item in group.options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    >
                </el-option>
            </el-option-group>
        </el-select>
        <addAppledataVue
        style="float: right; margin-right:5%;" 
        v-model="addAppledilog"
        @addAppledata="addAppledata"
        />
    </div>
    <div style="text-align:center; padding-bottom: 30px;">
        <el-row > 
            <el-col :span="8" v-for="(o, index) in pageData" :key="index" :offset="index > 0 ? index : 0" style="margin:20px 30px; width: 300px; height: 300px;" :data="showList">
                    <el-card style="width: 300px; height: 320px">
                        <div>
                            <div style="width: 258px; height: 146px"> 
                                <img
                                style="height: 100%;"
                                :src="o.url"
                                :fit="index">
                            </div>
                            <h1 style="margin: 5px;">{{o.name}}</h1>
                            <p><span>{{o.color}}</span>     <span>{{o.size}}</span></p>
                            <p>{{o.price}}</p>
                            <p>"{{o.advantage}}"</p>
                            <div class="bottom clearfix">
                                <el-row>
                                    <el-button icon="el-icon-edit" circle size="mini" @click="showEditDialog = true" ></el-button>
                                        <el-dialog
                                            title="管理员，您好"
                                            :visible.sync="showEditDialog"
                                            width="30%"
                                            center>
                                            <p style="font-size: 14px; letter-spacing:3px; height: 70px; line-height: 20px;">"抱歉，您暂无权限修改商品信息，您可以选择下架该商品或者向商家提出您的需求。"</p>
                                            <span slot="footer" class="dialog-footer">
                                                <el-button @click="showEditDialog = false">取 消</el-button>
                                                <el-button type="primary" @click="showDeep"
                                               >确 定</el-button>
                                            </span>
                                        </el-dialog>
                                        <el-dialog title="意见笺" :visible.sync="showDeepdialog" >
                                            <span style="text-align: left;">请输入您的意见</span>
                                            <el-input
                                                style="margin-top: 15px;"
                                                type="textarea"
                                                :rows="2"
                                                placeholder="请输入内容"
                                                v-model="textarea">
                                            </el-input>
                                            <div slot="footer" class="dialog-footer">
                                                <el-button @click="showDeepdialog = false">取 消</el-button>
                                                <el-button type="primary" @click="showDeepsuccess">确 定</el-button>
                                            </div>
                                        </el-dialog>
                                    <el-button 
                                        icon="el-icon-delete" 
                                        circle size="mini" 
                                        style="margin-left: 8px;" 
                                        @click="open(o.id)">
                                    </el-button>
                                </el-row>
                            </div>
                        </div>
                    </el-card>
            </el-col>     
        </el-row>   
    </div>
    <div class="el-page-bottom">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            layout="total, prev, pager, next, jumper"
            :total="tableData.filter((d) => d.name.includes(searchName)).length"
            >
        </el-pagination>
    </div>
 </div>
</template>
<script>
import axios from 'axios';
import api from "../../api/index";
import addAppledataVue from './addAppledata.vue';
// 初始化 mock 数据

export default{
 name: 'apple',
 components: {
    addAppledataVue
 },
 data() {                                                                       
      return {
        currentPage: 1,
        pageSize : 8,
        flag:false,
        tableLength:'',
        searchName:'',
        tableData: [],
        pageData:[], 
        showDeepdialog: false,
        showEditDialog: false,
        addAppledilog: false,
        textarea:'',
        options: [{
          label: 'iphone',
          options: [{
            value: 'iphone14',
            label: 'iphone14'
          }, {
            value: 'iphone13',
            label: 'iphone13'
          },{
            value: 'iphone12',
            label: 'iphone12'
          }]
        }, {
          label: 'AirPods',
          options: [{
            value: 'AirPods',
            label: 'AirPods'
          }, ]
        },{
          label: 'AWatch',
          options: [{
            value: 'AppleWatch',
            label: 'AppleWatch'
          },
         ]
        },{
          label: 'Ipad',
          options: [{
            value: 'ipad2022',
            label: 'ipad2022'
          },{
            value: 'ipadAir2022',
            label: 'ipadAir2022'
          },{
            value: 'ipadMini2022',
            label: 'ipadMini2022'
          },{
            value: 'ipadPro2022',
            label: 'ipadPro2022'
          }]
        },
        {
          label: 'Mac',
          options: [{
            value: 'MacBookAir',
            label: 'MacBookAir'
          },{
            value: 'MacBookPro',
            label: 'MacBookPro'
          },{
            value: 'MacMini',
            label: 'MacMini'
          },{
            value: 'MacPro',
            label: 'MacPro'
          },{
            value: 'MacStudio',
            label: 'MacStudio'
          }]
        }
    ],
        value: ''  
      }
    },
    watch: {
    showList() {
        this.changePage();
        this.pageUpdata();
        return ""
    },
    searchName() {
        this.pageUpdata();
        
    },
  },
    methods: {
        pageUpdata(){
            this.pageData = this.tableData.filter((d) => d.name.includes(this.searchName))
                    .slice(
                    (this.currentPage - 1) * this.pageSize,
                    this.currentPage * this.pageSize
                );
        },
        upData(){    
             return api.shopping.getAppleData().then((res) => {
                    this.tableData = res.data;
                    this.tableLength = this.tableData.length,
                    this.changePage();
                    this.pageUpdata();  
                })
                .catch((err) => {
                    console.log("数据请求失败!", err);
                })
                .finally(() => {  
                    this.loading = false;
                });               
        },
        handleSizeChange(val) {
            this.pageSize = val;
        },
        handleCurrentChange(val) {
            this.currentPage = val;   
        },
        changePage(){
            let newpage = Math.ceil((this.tableLength)/this.pageSize);
            let currentpages = this.currentPage > newpage ? newpage : this.currentPage;
            this.currentPage = currentpages < 1 ? 1 : currentpages; 
        },
        showDeepsuccess(){
            this.showDeepdialog = false,
            this.$message({
                message: '您的意见已成功发送至商家٩(●˙ε˙●)۶',
                type: 'success'
            });
        },
        delectData(index) {
            axios.delete('http://localhost:3001/apple/'+ index).then(()=>{
                this.upData(); 	
            });
        },
        open(ins) {
            this.$confirm('此操作将永久下架该商品, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.delectData(ins)
                    this.$message({
                        type: 'success',
                        message: '下架成功!'
                    });
                    }).catch(() => {
                    console.log(ins);
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                });          
            });
        },
        showDeep(){
            this.showDeepdialog = true;
            this.showEditDialog = false;
        },
        addAppledata(val){
            let result = this.tableData.some(e => {
                return val.name == e.name && val.color == e.color &&  val.size == e.size  
            })
            console.log(result);
            if(result){
                this.$message.error('已存在该商品');
            }else{
                if( this.tableData.length == 0 ) {
                    val.id = 0
                }else{val.id = this.tableData[this.tableData.length-1].id+1;}
                val.url = '../images/'+ val.name + val.color +'.png',
                console.log(val.url);
                axios.post('http://localhost:3001/apple/', val).then(()=>{
                this.upData()
                this.changePage()
                }) 	  
            }    
        }
    },
    computed: {
        showList() {
            this.changePage();
            this.pageUpdata();
             return "" 
        },   
    },
    created() {
       this.upData();
  }
}
</script>

<style scoped lang='less'>
.apple .heade{
    height: 50px;
    background:linear-gradient(black,gray);
    border-radius: 3px;
    text-align: center;
};
.demo-form-inline{
    width: 400px;
    float: left;
    text-align: center;
}
.time {
    font-size: 13px;
    color: #999;
  }
 
  .bottom {
    margin-top: 13px;
    margin-left: 180px;
    line-height: 12px;
    
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }
  h1{
    font-size: large;
    color:rgba(31, 32, 29, 0.5)
  }
  p{
    font-size: small;
    margin: 7px;
  }
  .el-icon-more{
    width: 200%; 
    height: 18%; 
    border:1px solid rgba(31, 32, 29, 0.5); 
    left:1300%; 
    text-align: center; 
    line-height: 130%;
    border-radius: 5px;
  }
  .el-row {
    width: 100%;
    padding-left: 7%;
    display: flex;
    justify-content:flex-start;
    flex-wrap: wrap;
  }
  .el-page-bottom{
    width: 100%;
    position: relative;
    text-align: center;
    bottom: 0;
  }
</style>